<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>Studio X - 软件工作室</title>
    <link rel="stylesheet" href="styles.css">
    <!-- 引入Space Grotesk字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 主容器 -->
    <div class="main-container">
        <!-- 顶部导航栏 -->
        <header class="header">
            <div class="header-content">
                <h1 class="studio-title">皇甫启飞</h1>
            </div>
        </header>

        <!-- Hero区域 -->
        <section class="hero-section">
            <div class="hero-carousel">
                <div class="hero-slide active">
                    <img src="https://picsum.photos/390/218?random=1" alt="Hero Background 1" class="hero-bg-image">
                    <div class="hero-overlay"></div>
                </div>
                <div class="hero-slide">
                    <img src="https://picsum.photos/390/218?random=2" alt="Hero Background 2" class="hero-bg-image">
                    <div class="hero-overlay"></div>
                </div>
                <div class="hero-slide">
                    <img src="https://picsum.photos/390/218?random=3" alt="Hero Background 3" class="hero-bg-image">
                    <div class="hero-overlay"></div>
                </div>
                <div class="hero-slide">
                    <img src="https://picsum.photos/390/218?random=4" alt="Hero Background 4" class="hero-bg-image">
                    <div class="hero-overlay"></div>
                </div>
                <div class="hero-slide">
                    <img src="https://picsum.photos/390/218?random=5" alt="Hero Background 5" class="hero-bg-image">
                    <div class="hero-overlay"></div>
                </div>
            </div>
            
            <!-- 左右切换按钮 -->
            <button class="carousel-btn carousel-prev" aria-label="Previous slide">
                <div class="carousel-arrow"></div>
            </button>
            <button class="carousel-btn carousel-next" aria-label="Next slide">
                <div class="carousel-arrow"></div>
            </button>
            
            <!-- 指示器 -->
            <div class="carousel-indicators">
                <div class="indicator active"></div>
                <div class="indicator"></div>
                <div class="indicator"></div>
                <div class="indicator"></div>
                <div class="indicator"></div>
            </div>
        </section>

        <!-- 个人介绍 -->
        <section class="intro-section">
            <h2 class="section-title">个人介绍</h2>
            <p class="intro-text">
                皇甫启飞，资深移动端开发工程师，拥有12年移动互联网开发经验。精通iOS原生开发，熟练Android、React Native、Flutter跨平台开发，具备良好的架构设计理论和实践经验。一直参与一线设计与开发，紧跟技术发展潮流，能够快速、有效地提供解决方案或完成重要功能开发。
            </p>
        </section>

        <!-- 教育经历 -->
        <section class="education-section">
            <h2 class="section-title">教育经历</h2>
            <div class="education-list">
                <!-- 南京大学 -->
                <div class="education-item">
                    <div class="education-logo">
                        <img src="images/njdx.jpeg" alt="南京大学" onerror="this.src='https://via.placeholder.com/80x80/2b3036/ffffff?text=南京大学'">
                    </div>
                    <div class="education-info">
                        <div class="education-header">
                            <h3 class="education-school">南京大学</h3>
                            <span class="education-major">软件工程</span>
                            <span class="education-degree">硕士学位</span>
                            <span class="education-tag">在职研究生</span>
                        </div>
                        <p class="education-period">2016.12 - 2018.12</p>
                    </div>
                </div>
                
                <!-- 江苏大学 -->
                <div class="education-item">
                    <div class="education-logo">
                        <img src="images/jsdx.jpeg" alt="江苏大学" onerror="this.src='https://via.placeholder.com/80x80/2b3036/ffffff?text=江苏大学'">
                    </div>
                    <div class="education-info">
                        <div class="education-header">
                            <h3 class="education-school">江苏大学</h3>
                            <span class="education-major">计算机科学与技术</span>
                            <span class="education-degree">学士学位</span>
                            <span class="education-tag">全日制</span>
                        </div>
                        <p class="education-period">2007.9 - 2011.7</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 工作经历（暂时隐藏） -->
        <section class="team-section" style="display: none;">
            <h2 class="section-title">工作经历</h2>
            <div class="team-grid">
                <!-- 南京汇银迅 -->
                <div class="team-member">
                    <div class="member-avatar">
                        <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=HYX&backgroundColor=b6e3f4&mouth=smile&style=circle" alt="南京汇银迅">
                    </div>
                    <h3 class="member-name">南京汇银迅</h3>
                    <p class="member-role">iOS资深/架构工程师</p>
                    <p class="member-role">2019.9-至今</p>
                </div>
                
                <!-- 南京联创科技 -->
                <div class="team-member">
                    <div class="member-avatar">
                        <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=LC&backgroundColor=ffdfbf&mouth=smile&style=circle" alt="南京联创科技">
                    </div>
                    <h3 class="member-name">南京联创科技</h3>
                    <p class="member-role">iOS高级工程师</p>
                    <p class="member-role">2013.9-2019.9</p>
                </div>
                
                <!-- 南京软通动力 -->
                <div class="team-member">
                    <div class="member-avatar">
                        <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=RTP&backgroundColor=c0aede&mouth=smile&style=circle" alt="南京软通动力">
                    </div>
                    <h3 class="member-name">南京软通动力</h3>
                    <p class="member-role">iOS高级工程师</p>
                    <p class="member-role">2012.12-2013.9</p>
                </div>
            </div>
        </section>

        <!-- 技术栈区域 -->
        <section class="skills-section">
            <h2 class="section-title">技术栈</h2>
            <div class="skills-grid">
                <!-- iOS开发 -->
                <div class="service-card">
                    <div class="service-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="5" y="2" width="14" height="20" rx="2" ry="2"/>
                            <line x1="12" y1="18" x2="12.01" y2="18"/>
                        </svg>
                    </div>
                    <h3 class="service-title">iOS开发</h3>
                </div>
                
                <!-- Android开发 -->
                <div class="service-card">
                    <div class="service-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="5" y="2" width="14" height="20" rx="2" ry="2"/>
                            <line x1="12" y1="18" x2="12.01" y2="18"/>
                        </svg>
                    </div>
                    <h3 class="service-title">Android开发</h3>
                </div>
                
                <!-- React Native -->
                <div class="service-card">
                    <div class="service-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                        </svg>
                    </div>
                    <h3 class="service-title">React Native</h3>
                </div>
                
                <!-- Flutter -->
                <div class="service-card">
                    <div class="service-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/>
                        </svg>
                    </div>
                    <h3 class="service-title">Flutter</h3>
                </div>
                
                <!-- 前端开发 -->
                <div class="service-card">
                    <div class="service-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                            <circle cx="9" cy="7" r="4"/>
                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                        </svg>
                    </div>
                    <h3 class="service-title">前端开发</h3>
                </div>
                
                <!-- 架构设计 -->
                <div class="service-card">
                    <div class="service-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="12" cy="12" r="10"/>
                            <polyline points="12,6 12,12 16,14"/>
                        </svg>
                    </div>
                    <h3 class="service-title">架构设计</h3>
                </div>
                
                <!-- Python脚本 -->
                <div class="service-card">
                    <div class="service-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                        </svg>
                    </div>
                    <h3 class="service-title">Python脚本</h3>
                </div>
            </div>
        </section>

        <!-- 服务范围 -->
        <section class="services-section">
            <h2 class="section-title">服务范围</h2>
            <div class="services-grid">
                <!-- 服务项目将通过JavaScript动态加载 -->
            </div>
        </section>

        <!-- 精选案例 -->
        <section class="cases-section">
            <h2 class="section-title">精选案例</h2>
            <div class="cases-grid">
                <!-- 电商平台开发案例 -->
                <div class="case-item" data-case-index="0">
                    <div class="case-image">
                        <img src="https://picsum.photos/173/173?random=20" alt="电商平台开发">
                    </div>
                    <h3 class="case-title">电商平台开发</h3>
                    <p class="case-description">为某知名品牌开发的全渠道电商平台，支持多端同步，月活用户超过50万。</p>
                </div>
                
                <!-- 企业管理系统案例 -->
                <div class="case-item" data-case-index="1">
                    <div class="case-image">
                        <img src="https://picsum.photos/173/173?random=21" alt="企业管理系统">
                    </div>
                    <h3 class="case-title">企业管理系统</h3>
                    <p class="case-description">为制造业企业定制的ERP管理系统，涵盖生产、销售、财务等全业务流程。</p>
                </div>
                
                <!-- 移动应用开发案例 -->
                <div class="case-item" data-case-index="2">
                    <div class="case-image">
                        <img src="https://picsum.photos/173/173?random=22" alt="移动应用开发">
                    </div>
                    <h3 class="case-title">移动应用开发</h3>
                    <p class="case-description">跨平台移动应用开发，同时支持iOS和Android，用户满意度达95%。</p>
                </div>
                
                <!-- UI设计案例 -->
                <div class="case-item" data-case-index="3">
                    <div class="case-image">
                        <img src="https://picsum.photos/173/173?random=23" alt="UI设计">
                    </div>
                    <h3 class="case-title">UI设计</h3>
                    <p class="case-description">为多个产品提供完整的UI设计方案，注重用户体验和视觉美感。</p>
                </div>
            </div>
        </section>

        <!-- 精选项目 -->
        <section class="portfolio-section">
            <h2 class="section-title">精选项目</h2>
            <div class="portfolio-grid">
                <!-- 汽修门店管理软件 -->
                <div class="portfolio-item" data-project-index="0">
                    <div class="portfolio-image">
                        <img src="https://picsum.photos/173/173?random=5" alt="汽修门店管理软件">
                    </div>
                    <h3 class="portfolio-title">汽修门店管理软件</h3>
                    <p class="portfolio-description">针对中小汽修门店的管理软件，提供完整的业务流程管理解决方案。</p>
                </div>
                
                <!-- Flutter二次元app -->
                <div class="portfolio-item" data-project-index="1">
                    <div class="portfolio-image">
                        <img src="https://picsum.photos/173/173?random=6" alt="有谷气Flutter">
                    </div>
                    <h3 class="portfolio-title">有谷气Flutter</h3>
                    <p class="portfolio-description">基于Flutter开发的二次元概念app，展示跨平台开发能力。</p>
                </div>
            </div>
        </section>

        <!-- 开源项目 -->
        <section class="opensource-section">
            <h2 class="section-title">开源项目</h2>
            <div class="opensource-grid">
                <!-- 设计模式 -->
                <div class="opensource-item" data-opensource-index="0">
                    <div class="opensource-image">
                        <img src="https://picsum.photos/173/173?random=8" alt="设计模式">
                    </div>
                    <h3 class="opensource-title">设计模式</h3>
                    <p class="opensource-description">分享软件开发中的通用设计原则和设计模式，帮助开发者提升代码质量。</p>
                </div>
                
                <!-- 数据库管理 -->
                <div class="opensource-item" data-opensource-index="1">
                    <div class="opensource-image">
                        <img src="https://picsum.photos/173/173?random=9" alt="数据库管理">
                    </div>
                    <h3 class="opensource-title">数据库管理</h3>
                    <p class="opensource-description">轻量级数据库自动升级管理类，支持iOS和Android平台。</p>
                </div>
                
                <!-- 路由组件 -->
                <div class="opensource-item" data-opensource-index="2">
                    <div class="opensource-image">
                        <img src="https://via.placeholder.com/173x173/2b3036/ffffff?text=Router" alt="路由组件">
                    </div>
                    <h3 class="opensource-title">路由组件</h3>
                    <p class="opensource-description">基于MGRouter二次封装的iOS端轻量级路由组件，简化页面跳转。</p>
                </div>
            </div>
        </section>

        <!-- 个人资料 -->
        <section class="contact-section">
            <h2 class="section-title">个人资料</h2>
            <div class="contact-info">
                <p class="contact-item">电话: 18251846048</p>
                <p class="contact-item">邮箱: hfqf123@126.com</p>
                <p class="contact-item">个人主页: https://gitee.com/hfqf1234</p>
                <p class="contact-item">籍贯: 江苏淮安</p>
            </div>
        </section>

        <!-- 点赞提示区域 -->
        <div class="like-hint">
            <div class="like-hint-content">
                <span class="like-hint-icon">❤️</span>
                <span class="like-hint-text">如果觉得不错，请给个点赞支持一下吧~</span>
            </div>
        </div>
        
        <!-- 底部统计和互动区域 -->
        <section class="footer-section">
            <div class="footer-content">
                <!-- 浏览统计 -->
                <div class="stats-container">
                    <div class="stat-item">
                        <div class="stat-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                                <circle cx="12" cy="12" r="3"/>
                            </svg>
                        </div>
                        <div class="stat-info">
                            <span class="stat-number" id="viewCount">1,234</span>
                            <span class="stat-label">浏览总数</span>
                        </div>
                    </div>
                </div>
                
                <!-- 点赞按钮 -->
                <div class="like-container">
                    <button class="like-button" id="likeButton">
                        <div class="like-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                            </svg>
                        </div>
                        <span class="like-text">点赞</span>
                        <span class="like-count" id="likeCount">56</span>
                    </button>
                </div>
            </div>
        </section>

        <!-- 工作室口号 -->
        <section class="slogan-section">
            <div class="slogan-container">
                <div class="slogan-text">
                    <span class="slogan-word slogan-professional">Professional.</span>
                    <span class="slogan-word slogan-proven">Proven.</span>
                    <span class="slogan-word slogan-proactive">Proactive.</span>
                </div>
                <div class="slogan-decoration">
                    <div class="decoration-line"></div>
                    <div class="decoration-dot"></div>
                    <div class="decoration-line"></div>
                </div>
            </div>
        </section>

    </div>

    <!-- Loading Overlay -->
    <div class="loading-overlay" id="loadingOverlay">
        <div style="text-align: center;">
            <div class="loading-spinner"></div>
            <div class="loading-text">正在跳转...</div>
        </div>
    </div>

    <script src="config.js"></script>
    <script src="api.js"></script>
    <script src="script.js"></script>
</body>
</html> 